<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquery-1.10.1.js" ></script>
    <script>
        var data = [{sheng:'辽宁', cites:[{cname:'沈阳', areas:['沈北', '和平', '铁西', '苏家屯'
        ]}, {cname:'大连', areas:['沙河口区', '中山区', '高新区', '西岗区']}, 
        {cname:'鞍山', areas:['立山区']}, {cname:'锦州', areas:['古塔','松山区']}]},
        {sheng:'江苏', cites:[{cname:'南京', areas:['雨花区','江宁区']}, {cname:'无锡', areas:['并湖区'] }]}
        ]
        // 正规
        $(document).ready(function(){
            $.each(data, (i, n) => {
                $("#sheng").append(`<option value='${i}'>${n.sheng}</option>`)
            })
            // call语法   修改this ==> $("#sheng").get(0)
            change.call($("#sheng").get(0))
            $("#sheng").on("change", change)
            $("#shi").on("change", change1)
        })

        function change(){
            $("#shi").empty();
            $.each(data[$(this).val()].cites, (i,n) => {
                $("#shi").append(`<option value='${i}'>${n.cname}</option>`)
            })

            change1();
        }
        function change1() {
            $("#qu").empty();
            $.each(data[$("#sheng").val()].cites[$("#shi").val()].areas, (i,n) => {
                $("#qu").append(`<option value='${i}'>${n}</option>`)
            })
        }
    </script>
</head>
<body>
   省
    <select id="sheng"></select>
   市
   <select id="shi"></select>
   区
   <select id="qu"></select>
</body>
</html>